<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>登录</title>
		<link rel="stylesheet" href="./css/footer.css">
		<script src="./js/jquery.min.js"></script>
		<script src="./js/common.js"></script>
		<link rel="stylesheet" href="./css/footer.css">
	</head>
	<body>
		<div class="container">
			<div class="tops">
				<div class="left">
					<img src="./img/login.png" alt="" srcset="" />
				</div>
				<div class="right">
					<div class="title">登录</div>
					<div class="infos">欢迎登录使用我们的完整服务</div>
					<div class="zhdl">
						<div class="xz" id="accountNumber">账号密码登录</div>
						<div class="none" id="verificationCode">验证码登录</div>
					</div>
					<div id="passwordLongin">
						<div class="asscon">
							<input type="text" placeholder="请输入你的邮箱" value="admin@163.com"/>
						</div>
						<div class="password">
							<input type="password" placeholder="请输入你的密码" value="123456"/>
						</div>
						<div class="login">登录</div>
						<div class="jg">
							<div class="l1"></div>
							<div class="text">其他登录方式</div>
							<div class="r1"></div>
						</div>
						<div class="ys"></div>
						<div class="wzs">邮箱登录</div>
					</div>
					<div id="emailLogin">
						<div class="asscon">
							<input type="text" placeholder="请输入你的邮箱" value="12345678910"/>
						</div>
						<div class="password">
							<input type="text" placeholder="请输入验证码"  value="123456"/>
							<div class="obtain">
								获取验证码
							</div>
						</div>
						<div class="login">登录</div>
						<div class="jg">
							<div class="l1"></div>
							<div class="text">其他登录方式</div>
							<div class="r1"></div>
						</div>
						<div class="ys1"></div>
						<div class="wzs">手机登录</div>
					</div>
				</div>
			</div>
			
		</div>
		<div class="bottoms_all">
			<div class="bottoms">
				<div class="info">
					<div class="items">
						<div class="title">
							ABOUT
						</div>
						<div class="title">
							关于我们
						</div>
						<div class="jsx">我们的使命是通过不断优化和提高生产流程，为客户提供最优质的服务和产品</div>
						<div class="ewm">
							<div class="boxs">
								<img src="./img/member/ewm.png" alt="" srcset="" />
							</div>
							<div class="boxs">
								<img src="./img/member/ewm.png" alt="" srcset="" />
							</div>
						</div>
					</div>
					<div class="items">
						<div class="title">CONTACT</div>
						<div class="title">联系我们</div>
						<div class="jsx">地址：海南省海口市秀英区海秀街道办南海大道288号海鑫郦都7号楼海口药谷牛物医药创新综合体2层215室A00062号</div>
						<div class="jsx1">电话:(010)12345678</div>
						<div class="jsx1">Email: contact@example.net</div>
						<div class="jsx1">Web:www.innocorp.cn</div>
					</div>
		
					<div class="items">
						<div class="title">LINKS</div>
						<div class="title">友情链接</div>
						<div class="jsx">合作伙伴一</div>
						<div class="jsx1">合作伙伴二</div>
						<div class="jsx1">合作伙伴三</div>
						<div class="jsx1">合作伙伴四</div>
						<div class="jsx1">合作伙伴五</div>
					</div>
					<div class="items">
						<div class="title">MECHANISM</div>
						<div class="title">合作机构</div>
						<div class="imgs">
							<img src="./img/logo2.png" alt="" srcset="" />
						</div>
						<div class="imgs">
							<img src="./img/logo1.png" alt="" srcset="" />
						</div>
					</div>
				</div>
				<div class="bq">版权所有 ◎ 2024|海南孚润数字技术有限公司|京ICP备12345678号</div>
				<div class="bqs">数据资产管理入表</div>
			</div>
		</div>
	</body>
</html>
<script src="./js/new_file.js" type="text/javascript" charset="utf-8"></script>
<script>
	$('#accountNumber').on('click', function() {
		// 处理点击事件
		$(this).removeClass('none').addClass('xz');
		$('#verificationCode').removeClass('xz').addClass('none');
		$('#passwordLongin').css('display', 'block');
		$('#emailLogin').css('display', 'none');
	});

	$('#verificationCode').on('click', function() {
		// 处理点击事件
		$(this).removeClass('none').addClass('xz');
		$('#accountNumber').removeClass('xz').addClass('none');
		$('#passwordLongin').css('display', 'none');
		$('#emailLogin').css('display', 'block');
	});
	$('.login').on('click', function() {
		localStorage.setItem('PAGE_TOKEN', 'admin');
		window.location.href = './index.html';
	});
</script>
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	#emailLogin {
		display: none;
	}

	input {
		border: none;
		width: auto;
		padding: 0 1.125rem;
		height: 100%;
		font-weight: 400;
		font-size: 1.125rem;
		color: #999999;
		outline: none;
	}

	/* 750px 以下的样式 */
	@media screen and (max-width: 768px) {
		body {
			font-size: 12px;
			background-color: #ffffff;
		}
		.bottoms{
			display: none !important;
		}
		.tops {
			/* display: flex; */
			width: 100%;
			position: relative;
		}
		.container{
			position: relative;
		}
		.tops .left {
			/* flex: 1; */
			width: 100%;
			position: relative;
			/* height: 56.25rem; */
			/* background: url(./img/login.png); */
			/* background-size: 100% 100%; */
			/* border-radius: 0px 0px 0px 0px; */
		}
		.tops .left img{
			width: 100%;
		}
		.tops .right {
			
			width: calc(100% - 10rem);
			padding-bottom: 3rem;
			margin: 0 auto;
			/* height: 56.25rem; */
			background: #FFFFFF;
			border-radius: 0px 0px 0px 0px;
		}
		
		.tops .right .title {
			margin-top: 6.25rem;
			margin-left: 7.0625rem;
			display: none;
			font-weight: bold;
			font-size: 2.125rem;
			color: #000000;
		}
		
		.tops .right .infos {
			display: none;
			margin-top: 1.25rem;
			margin-left: 7.0625rem;
			font-weight: 400;
			font-size: 1.125rem;
			color: #666666;
		}
		
		.tops .right .zhdl {
			width: 32.125rem;
			/* margin-left: 7.0625rem; */
			margin-top: 3rem;
			display: flex;
			justify-content: space-around;
		}
		
		.tops .right .zhdl .xz {
			font-weight: bold;
			font-size: 1.125rem;
			color: #000000;
			cursor: pointer;
			padding-bottom: 1.25rem;
			border-bottom: 0.25rem solid #3E7CFF;
		}
		
		.tops .right .zhdl .none {
			font-weight: 400;
			font-size: 1.125rem;
			color: #000000;
			cursor: pointer;
		}
		
		.tops .right .asscon {
			width: 100%;
			/* margin-left: 7.0625rem; */
			height: 3.625rem;
			border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
			border: 1px solid #E6E6E6;
			margin-top: 1.75rem;
		}
		
		.tops .right .password {
			width: 100%;
			margin-top: 1.25rem;
			/* margin-left: 7.0625rem; */
			height: 3.625rem;
			border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
			border: 1px solid #E6E6E6;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.login{
			/* width: 32.125rem; */
			width: 100%;
			height: 3.625rem;
			text-align: center;
			line-height: 3.625rem;
			background: #3E7CFF;
			border-radius: 0.25rem;
			font-weight: bold;
			font-size: 1.125rem;
			color: #FFFFFF;
			margin: 2.5rem auto 0;
			cursor: pointer;
		}
		.obtain{
			width: 6.875rem;
			height: 2.625rem;
			background: #3E7CFF;
			border-radius: 0.375rem;
			font-weight: 400;
			font-size: 1rem;
			line-height: 2.625rem;
			text-align: center;
			color: #FFFFFF;
			margin-right: 1.125rem;
			cursor: pointer;
		}
		
		.tops .right .jg {
			display: none;
			gap: 0.875rem;
			width: 32.125rem;
			justify-content: space-between;
			align-items: center;
			margin-top: 6.25rem;
			margin-left: 7.0625rem;
		}
		
		.tops .right .jg .l1 {
			flex: 1;
			height: 0.0625rem;
			background: #E6E6E6;
		}
		
		.tops .right .jg .text {
			font-weight: 400;
			font-size: 1.125rem;
			color: #999999;
		}
		
		.tops .right .jg .r1 {
			flex: 1;
			height: 0.0625rem;
			background: #E6E6E6;
		}
		
		.tops .right .ys {
			display: none;
			width: 3rem;
			height: 3rem;
			margin: 1.75rem auto;
			overflow: hidden;
			background: url(./img/yx.png);
			background-size: 100% 100%;
		}
		
		.tops .right .ys1 {
			display: none;
			width: 3rem;
			height: 3rem;
			margin: 1.75rem auto;
			overflow: hidden;
			background: url(./img/all_phone.png);
			background-size: 100% 100%;
		}
		
		.tops .right .wzs {
			margin-top: 0.875rem;
			background-size: 100% 100%;
			font-weight: 400;
			font-size: 1rem;
			color: #999999;
			text-align: center;
		}
		
		.bottoms {
			width: 100%;
			height: 19rem;
			background: #000000;
		}
		
		.bottoms .info {
			display: flex;
			justify-content: space-around;
		}
		
		.bqs {
			text-align: center;
			margin-top: 1.25rem;
			font-size: 0.75rem;
			color: #C2C3BE;
		}
		
		.bq {
			text-align: center;
			margin-top: 1.25rem;
			font-size: 0.75rem;
			color: #C2C3BE;
		}
		
		.bottoms .info .items {
			margin-top: 1.25rem;
			max-width: 15rem;
		}
		
		.bottoms .info .items .title {
			font-size: 1.2rem;
			color: #ffffff;
			font-weight: 800;
		}
		
		.bottoms .info .items .jsx {
			margin-top: 0.75rem;
			font-size: 0.75rem;
			color: #C2C3BE;
		}
		
		.bottoms .info .items .jsx1 {
			font-size: 0.75rem;
			color: #C2C3BE;
		}
		
		.bottoms .info .items .imgs {
			margin-top: 0.75rem;
			width: 5rem;
			height: 2rem;
			background: plum;
		}
		
		.bottoms .info .items .ewm {
			display: flex;
			align-items: center;
			margin-top: 1.25rem;
			gap: 15px;
		}
		
		.bottoms .info .items .ewm .boxs {
			width: 4rem;
			height: 4rem;
			background-color: plum;
		}
	}

	/* 750px 到 2000px 之间的样式 */
	@media screen and (min-width: 768px) {
		body {
			font-size: 16px;
			background-color: #ffffff;
		}

		.tops {
			display: flex;
		}

		.tops .left {
			flex: 1;
			height: 56.25rem;
			background: url(./img/login.png);
			background-size: 100% 100%;
			border-radius: 0px 0px 0px 0px;
		}
		.tops .left img{
			width: 100%;
			height: 100%;
		}
		.tops .right {
			width: 46.25rem;
			height: 56.25rem;
			background: #FFFFFF;
			border-radius: 0px 0px 0px 0px;
		}

		.tops .right .title {
			margin-top: 6.25rem;
			margin-left: 7.0625rem;
			font-weight: bold;
			font-size: 2.125rem;
			color: #000000;
		}

		.tops .right .infos {
			margin-top: 1.25rem;
			margin-left: 7.0625rem;
			font-weight: 400;
			font-size: 1.125rem;
			color: #666666;
		}

		.tops .right .zhdl {
			width: 32.125rem;
			margin-left: 7.0625rem;
			margin-top: 3rem;
			display: flex;
			justify-content: space-around;
		}

		.tops .right .zhdl .xz {
			font-weight: bold;
			font-size: 1.125rem;
			color: #000000;
			cursor: pointer;
			padding-bottom: 1.25rem;
			border-bottom: 0.25rem solid #3E7CFF;
		}

		.tops .right .zhdl .none {
			font-weight: 400;
			font-size: 1.125rem;
			color: #000000;
			cursor: pointer;
		}

		.tops .right .asscon {
			width: 32.125rem;
			margin-left: 7.0625rem;
			height: 3.625rem;
			border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
			border: 1px solid #E6E6E6;
			margin-top: 1.75rem;
		}

		.tops .right .password {
			width: 32.125rem;
			margin-top: 1.25rem;
			margin-left: 7.0625rem;
			height: 3.625rem;
			border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
			border: 1px solid #E6E6E6;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.login{
			cursor: pointer;
			width: 32.125rem;
			height: 3.625rem;
			text-align: center;
			line-height: 3.625rem;
			background: #3E7CFF;
			border-radius: 0.25rem;
			font-weight: bold;
			font-size: 1.125rem;
			color: #FFFFFF;
			margin: 2.5rem auto 0;
		}
		.obtain{
			width: 6.875rem;
			height: 2.625rem;
			background: #3E7CFF;
			border-radius: 0.375rem;
			font-weight: 400;
			font-size: 1rem;
			line-height: 2.625rem;
			text-align: center;
			color: #FFFFFF;
			margin-right: 1.125rem;
			cursor: pointer;
		}

		.tops .right .jg {
			display: flex;
			gap: 0.875rem;
			width: 32.125rem;
			justify-content: space-between;
			align-items: center;
			margin-top: 6.25rem;
			margin-left: 7.0625rem;
		}

		.tops .right .jg .l1 {
			flex: 1;
			height: 0.0625rem;
			background: #E6E6E6;
		}

		.tops .right .jg .text {
			font-weight: 400;
			font-size: 1.125rem;
			color: #999999;
		}

		.tops .right .jg .r1 {
			flex: 1;
			height: 0.0625rem;
			background: #E6E6E6;
		}

		.tops .right .ys {
			width: 3rem;
			height: 3rem;
			margin: 1.75rem auto;
			overflow: hidden;
			background: url(./img/yx.png);
			background-size: 100% 100%;
		}

		.tops .right .ys1 {
			width: 3rem;
			height: 3rem;
			margin: 1.75rem auto;
			overflow: hidden;
			background: url(./img/all_phone.png);
			background-size: 100% 100%;
		}

		.tops .right .wzs {
			margin-top: 0.875rem;
			background-size: 100% 100%;
			font-weight: 400;
			font-size: 16px;
			color: #999999;
			text-align: center;
		}

		.bottoms {
			width: 100%;
			height: 19rem;
			background: #000000;
		}

		.bottoms .info {
			display: flex;
			justify-content: space-around;
		}

		.bqs {
			text-align: center;
			margin-top: 1.25rem;
			font-size: 0.75rem;
			color: #C2C3BE;
		}

		.bq {
			text-align: center;
			margin-top: 1.25rem;
			font-size: 0.75rem;
			color: #C2C3BE;
		}

		.bottoms .info .items {
			margin-top: 1.25rem;
			max-width: 15rem;
		}

		.bottoms .info .items .title {
			font-size: 1.2rem;
			color: #ffffff;
			font-weight: 800;
		}

		.bottoms .info .items .jsx {
			margin-top: 0.75rem;
			font-size: 0.75rem;
			color: #C2C3BE;
		}

		.bottoms .info .items .jsx1 {
			font-size: 0.75rem;
			color: #C2C3BE;
		}

		.bottoms .info .items .imgs {
			margin-top: 0.75rem;
			width: 5rem;
			height: 2rem;
			background: plum;
		}

		.bottoms .info .items .ewm {
			display: flex;
			align-items: center;
			margin-top: 1.25rem;
			gap: 15px;
		}

		.bottoms .info .items .ewm .boxs {
			width: 4rem;
			height: 4rem;
			background-color: plum;
		}

	}

	
</style>